<template>
	<div class="management">
		<!--<div class="padd"></div>
		<div class="header">
			<div class="back-icon" @click="closeWin">
				<div class="iconfont">&#xe624;</div>
			</div>
			<div class="title">活动管理</div>
		</div>-->
		<div v-show="okMenuList.length">
			<div class="title">已创建的活动</div>
			<div class="split-w"></div>
		</div>
		<div class="no-activty" v-show="hasList">
			<div class="img">
				<img src="../../assets/images/functions/noactitv.png" width="100%" height="100%" />
			</div>
			<p>没有活动，赶紧创建一个吧！</p>
		</div>
		<div class="content" ref="content" v-show="okMenuList.length > 0">
			<div>
				<div class="content-item" v-for="(item,index) in okMenuList">
					<div class="img-warrp">
						<img class="item-img" :src="item.face_path" alt="" />
					</div>
					<div class="item-info vux-1px-b">
						<h3 class="item-title">
							{{item.title}}
							<span class="status">{{item.release_status | status}}</span>
						</h3>					
						<p class="item-time">							
							<span class="time-icon iconfont">&#xe638;</span>
							<span class="">{{item.week_time}}</span>
							<span class="time">{{item.begin_time}}</span>
						</p>
						<p class="item-address">
							<span class="address-icon iconfont">&#xe63f;</span>
							<span class="address">{{item.address}}</span>
						</p>
					</div>
					<div class="item-users">
						<span class="user-icon iconfont">&#xe616;</span>
						<span class="user-num">{{item.join_count}}</span>
					</div>
					<div class="edit">
						<div class="edit-title" @click="handleSelect(index)">
							<span class="iconfont">&#xe620;</span>
							<ul class="select-con" v-show="showSelect === index">
								<li @click.stop="handleEdit(item.id,item.release_status,$event)" class="edit-item" v-show="item.release_status== 0">发布</li>
								<li @click.stop="handleEdit(item.id,item.release_status,$event)" class="edit-item" v-show="item.release_status== 1">取消发布</li>
								<li @click.stop="handleEdit(item.id,item.release_status,$event)" class="edit-item" v-show="item.release_status== 2" style="color: #ff1351;">删除</li>
							</ul>
						</div>
					</div>
				</div>	
				<div class="load-more" v-show="isMore && okMenuList.length>5">{{title}}</div>
			</div>									
		</div>
		<div @click="createAct" class="confirm-btn">创建活动</div>
	</div>
</template>

<script type="text/javascript">
	import {getUrlParam}  from '@/assets/js/getUrlParam'
	import BScroll from 'better-scroll'
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	export default{
		name : 'activityManagement',
		data(){
			return{
				okMenuList:[],
				showSelect: '',
				page  : 1,
				title :'上拉加载更多',
				isMore: true,
				hasList : false
			}
		},
		methods:{
			//编辑
			handleEdit(id,status,e){
				let editInfo = {
					userinfo : {
						token : getUrlParam('token') || '',
						uid	  : getUrlParam('uid')   || '' 
					},
					user_product_id : getUrlParam('user_product_id') || '',
					id 				: id,
					release_status  : status					
				}
				let _this = this
				this.$vux.confirm.show({
				    title: '操作提示',
        			content: '确定' + e.target.innerText + '吗？',
					  onCancel  () {},
					  onConfirm () {
					  	_this.$axiosPost('/api/activity/editactivity',{
							data : JSON.stringify(editInfo)
						}).then( res => {
							if(status == 0){
								if(res.status == 1){
									_this.okMenuList.forEach( item => {
										if(res.id === item.id){
											item.release_status = 1
										}
									})
								}
							}
							if(status == 1){
								if(res.status == 1){
									_this.okMenuList.forEach( item => {
										if(res.id === item.id){
											item.release_status = 0
										}
									})
								}
							}
							if(status == 2){
								if(res.status == 1){
									_this.okMenuList.forEach( (item,index)=> {
										if(res.id === item.id){
											_this.okMenuList.splice(index,1)
										}
									})
								}
							}													
						})
					  }
				})
				this.showSelect = ''
			},
			createAct(){
				this.$router.push('/createActivity')
			},
			closeWin(){
				let u = navigator.userAgent;
			    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android终端
			    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios
			    if(isAndroid) {
			        window.WebView.finish()
			    } else if (isiOS) {
			        window.location.href = 'mofing://exitbrowser';
			    }	
			},
			getActivtiyList(page){
				let info = {
					userinfo : {
						token : getUrlParam('token') || '',
						uid	  : getUrlParam('uid')   || ''
					},
					page 			: page,
					user_product_id : getUrlParam('user_product_id')   ? getUrlParam('user_product_id')   : '',					
				}
				this.$axiosPost('/api/activity',{
					data : JSON.stringify(info)
				}).then((res) => {
					if(res.status == 0 && page === 1){
						this.hasList = true
						return
					}
					if(res.status == 0){
						this.title = '已加载全部'
						return
					}
					if(page > 1){
						res.forEach( item => {
							this.okMenuList.push(item)
						})
						return
					}
					this.okMenuList = res
				})
				
			},
			handleSelect(index){
				if(this.showSelect !== index){
					this.showSelect = index
				}else{
					this.showSelect = ''
				}							
			}
		},
		filters : {
			status(value){
				if(Number(value) == 0){
					return '未发布'
				}
				if(Number(value) == 1){
					return '已发布'
				}
				if(Number(value) == 2){
					return '已结束'
				}
			}
		},
		computed:{

		},
		watch:{
			okMenuList(){
				this.BScroll.refresh()
			}
		},
		mounted(){
			this.BScroll = new BScroll(this.$refs.content,{
				click:true,
				probeType: 3,
				pullUpLoad : {
					threshold: -50
				}

			})
			this.BScroll.on('pullingUp',() => {
				this.getActivtiyList(++this.page)
				this.BScroll.finishPullUp()
				this.BScroll.refresh()
			})

			this.getActivtiyList(this.page)
		},
		components:{

		}
	}
</script>
<style lang="less" scoped>
	@import '~vux/src/styles/1px.less';
	.management /deep/ .weui-dialog__btn_primary{
		color: #ff1351;
	}
	.management{
		background:#fff;
		text-align: left;
		.padd{
			height:.54rem;
			background:#ff1351;
		}
		.header{
			position: relative;
			display:flex;
			height:.9rem;
			line-height: .9rem;
			color:#fff;
			background:#ff1351;
			font-size:.34rem;		
			.back-icon{
				position: absolute;
				left: 0;
				top: 0;
				height: .9rem;
				padding:0 .2rem;
			}
			.title{
				flex:1;
				text-align: center;
			}
		}
		.no-activty{
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -3.5rem;
			margin-left: -2.5rem;
			width: 5rem;
			height: 7rem;
			.img{
				margin: 0 auto;
				width: 4.4rem;
				height: 4.9rem;
			}
			p{
				line-height: .8rem;
				text-align: center;
			}
		}
		.title{
			padding-left: .15rem;
			padding-bottom: .2rem;
			margin: .3rem .2rem 0;
			height: .38rem;
			line-height: .38rem;
			border-left: .1rem solid #ff1351;
		}	
		.split-w{
			height: .2rem;
			background: #fff;
		}	
		.content{
			position: absolute;
			top: 0;
			bottom: 1.25rem;
			left: 0;
			right: 0;
			overflow: hidden;
			background: #fff;
			.content-item{
				display: flex;
				position: relative;				
				height: 2.7rem;
				.img-warrp{
					width: 2.7rem;
					padding: .2rem;
					.item-img{
						width: 100%;
						height: 100%;
					}
				}
				.item-info{
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: .2rem;					
					.item-title{
						overflow: hidden;
						text-overflow: ellipsis;
						height: .8rem;
						width: 3rem;
						margin-bottom: .2rem;
						.status{
							display: inline-block;
							font-size: .24rem;
							color: #828282;
							font-weight: 200;	
				      	}
					}
					.iconfont{
						vertical-align: top;
					}
					.item-time,.item-address{
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						vertical-align: top;
						line-height: .45rem;
						color: #828282;						
					}
					.item-address{
						font-size: .24rem;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				.item-users{
					position: absolute;
					right: .3rem;
					bottom: .08rem;
				}
				.edit{
					position: absolute;
					right: .6rem;
					top: .3rem;
					.edit-title{
						position: relative;
						padding: 0 .1rem;
						.select-con{
							position: absolute;
							left: .1rem;
							top: .4rem;
							.edit-item{
								padding: .05rem 0;
								width: 2rem;
								font-size: .2rem;
							}
						}
					}
				}
			}
			.load-more{
				height: .6rem;
				line-height: .6rem;
				text-align: center;
			}
		}
		.confirm-btn{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 1.25rem;
			background: #ff1351;
			font-size: .4rem;
			text-align: center;
			line-height: 1.25rem;
			color: #fff;
		}
	}
</style>>